<template>
  <div>
    <h1>computed函数用法</h1>
    <ul>
      <li>基本工资：{{ money }}</li>
      <li>加薪后工资：{{ addMoney }}</li>
      <li>
        <button @click="addFn">点击加薪</button>
      </li>
    </ul>
  </div>
</template>

<script>
import { ref, computed } from 'vue'
export default {
  setup () {
    // 1e4科学计数法   === 10000
    const money = ref(1e4)

    // 计算加薪
    const addMoney = computed(() => {
      // return money.value + Math.random() *  1e4
      return money.value + 10000
    })

    // 点击加薪
    const addFn = () => {
      money.value = Math.random() * 2e4 + 1e4
    }

    return { money, addMoney, addFn }
  }
}
</script>

<style lang="scss" scoped>

</style>
